Add view transitions in WP Admin #10699

felixarntz · 2026-01-08T19:44:27Z

Adds "virtual" CSS asset wp-view-transitions-admin with inline CSS for basic view transitions in WP Admin, including smooth transitions between admin menu items.
Enqueues the asset on admin_enqueue_scripts by default.
Provides a function with the inline CSS so that it lives in the view-transitions.php file rather than the generic script-loader.php file.
CSS is exactly the same as in https://github.com/WordPress/performance/blob/trunk/plugins/view-transitions/includes/admin.php.
Tests included.

Trac ticket: https://core.trac.wordpress.org/ticket/64470

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

github-actions · 2026-01-08T19:44:38Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props flixos90, westonruter.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2026-01-08T19:55:38Z

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

The Plugin and Theme Directories cannot be accessed within Playground.
All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

src/wp-includes/view-transitions.php

westonruter · 2026-01-08T19:57:08Z

src/wp-includes/view-transitions.php

+ * @return string The CSS.
+ */
+function wp_get_view_transitions_admin_css(): string {
+	$css = <<<CSS


Would it be better to have this CSS in a file and then load it? See what is being merged soon in #10676

This would enable CSS linting as well as minification.

Great point! Will update to move this to a CSS file. Just would want to make sure that that file never gets loaded as its own HTTP request since that would be somewhat pointless with its 2 lines or so :)

I started working on this locally, but I think because this is "very" modern CSS, I think Core's linters don't like it because they're probably outdated.

I'm not familiar with that tooling, so I'm unsure whether we can simply update it or whether that would introduce a new set of problems to address. Do you have any insights on this?

Specifically, it's complaining about the <custom-ident> bit: ") expected" 🤔

Yeah, CSS validation in the Customizer and Site Editor are outdated I know. See Core-64418. With the CSS linter, can it be suppressed with a comment? Which tool is failing? Maybe we can update the dependency.

Humm, I tried adding a src/wp-admin/css/view-transitions.css file containing:

@view-transition { navigation: auto; } #adminmenu > .menu-top { view-transition-name: attr( id type(<custom-ident>), none ); }

Then I ran npm run build:dev and it successfully emitted a src/wp-admin/css/view-transitions.min.css containing:

/*! This file is auto-generated */ @view-transition{navigation:auto}#adminmenu>.menu-top{view-transition-name:attr(id type(<custom-ident>),none)}

So it seems to be working fine.

felixarntz · 2026-01-10T20:50:09Z

@westonruter Do you have an idea how to best fix https://github.com/WordPress/wordpress-develop/actions/runs/20884023219/job/60004547145?pr=10699 or why it fails? My hunch is that it's because the .min file that's created as part of the build doesn't exist maybe and then it causes a fatal error?

westonruter · 2026-01-10T21:03:50Z

@felixarntz That's strange, because for the E2E test it does a full build, right? For running PHPUnit tests, I know a build isn't done, and this causes all kinds of headaches when SCRIPT_DEBUG is off. We have to touch files to make sure they exist so errors don't happen, for example:

wordpress-develop/tests/phpunit/tests/formatting/emoji.php

Lines 18 to 19 in 376539e

    
           // `_print_emoji_detection_script()` assumes `wp-includes/js/wp-emoji-loader.js` is present: 
        
           self::touch( ABSPATH . WPINC . '/js/wp-emoji-loader.js' );

But I don't see how this would be needed for E2E tests if they were working correctly with SCRIPT_DEBUG was off previously. If SCRIPT_DEBUG was off and a build isn't done, then none of the minified JS/CSS files would exist, and nothing would work.

westonruter · 2026-01-10T21:08:59Z

To debug whether the build is the problem, maybe temporarily change:

$affix = SCRIPT_DEBUG ? '' : '.min';

To:

$affix = '';

mukeshpanchal27

Thanks @felixarntz for the PR! Overall look solid to me. Left some feedback/Questions.

mukeshpanchal27 · 2026-01-11T06:37:10Z

src/wp-includes/view-transitions.php

+	$path  = ABSPATH . "wp-admin/css/view-transitions{$affix}.css";
+	return file_get_contents( $path );


Suggested change

$path = ABSPATH . "wp-admin/css/view-transitions{$affix}.css";

return file_get_contents( $path );

$path = ABSPATH . "wp-admin/css/view-transitions{$affix}.css";

if ( ! file_exists( $path ) || ! is_readable( $path ) ) {

return '';

}

return file_get_contents( $path );

Should we check whether the file exists and return an empty string if it doesn’t?

Do we needs to add filter so we can extend the CSS? Something like:

return apply_filters( 'wp_view_transitions_admin_css', file_get_contents( $path ) );

Should we check whether the file exists and return an empty string if it doesn’t?

It should exist. If not, it's an error. We don't do a file_exists() check in _print_emoji_detection_script(), for example.

Add view transitions in WP Admin.

017ad4d

felixarntz requested review from mukeshpanchal27 and westonruter January 8, 2026 19:44

westonruter reviewed Jan 8, 2026

View reviewed changes

felixarntz added 2 commits January 10, 2026 12:34

Use CSS file.

291cba6

Merge branch 'trunk' into add/64470-view-transitions-admin

8fe35f3

mukeshpanchal27 reviewed Jan 11, 2026

View reviewed changes

		$path = ABSPATH . "wp-admin/css/view-transitions{$affix}.css";
		return file_get_contents( $path );

Add view transitions in WP Admin #10699

Are you sure you want to change the base?

Add view transitions in WP Admin #10699

Uh oh!

Conversation

felixarntz commented Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jan 8, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

felixarntz commented Jan 10, 2026

Uh oh!

westonruter commented Jan 10, 2026

Uh oh!

westonruter commented Jan 10, 2026

Uh oh!

mukeshpanchal27 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

felixarntz commented Jan 8, 2026 •

edited

Loading

github-actions bot commented Jan 8, 2026 •

edited

Loading